<script setup>
  import { computed, onMounted, reactive } from 'vue';
  import BorderChinese from '@/pages/chineseSurname/components/components/borderChinese.vue';
  import sheep from '@/sheep';

  const emits = defineEmits(['setSelectCode']);

  const state = reactive({
    page: 1,
    pagesize: 16,
    total: 0,
    code: '',
  });
  const ancestorsRoots = reactive({
    swiperList: [],
    list: [],
  });
  const props = defineProps({
    pageHeight: {
      type: String,
      default: '0px',
    },
  });

  onMounted(() => {
    getEmperor();
    getEmperorList();
  });

  const zimuList = [
    {
      name: 'A',
    },
    {
      name: 'B',
    },
    {
      name: 'C',
    },
    {
      name: 'D',
    },
    {
      name: 'E',
    },
    {
      name: 'F',
    },
    {
      name: 'G',
    },
    {
      name: 'H',
    },
    {
      name: 'I',
    },
    {
      name: 'J',
    },
    {
      name: 'K',
    },
    {
      name: 'L',
    },
    {
      name: 'M',
    },
    {
      name: 'N',
    },
    {
      name: 'O',
    },
    {
      name: 'P',
    },
    {
      name: 'Q',
    },
    {
      name: 'R',
    },
    {
      name: 'S',
    },
    {
      name: 'T',
    },
    {
      name: 'U',
    },
    {
      name: 'V',
    },
    {
      name: 'W',
    },
    {
      name: 'X',
    },
    {
      name: 'Y',
    },
    {
      name: 'Z',
    },
    {
      name: '全部',
    },
  ];
  const selectInfo = reactive({
    selectCode: '全部',
  });
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const version = computed(() => sheep.$store('AI').version);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);

  function setSelectCode(code) {
    selectInfo.selectCode = code;
    ancestorsRoots.list = [];
    state.page = 1;
    state.total = 0;
    getEmperorList();
  }

  // 获取拜祖寻根列表
  async function getEmperorList(code = '') {
    const { data } = await sheep.$api.surname.getAllSurname({
      cid: 4,
      code: selectInfo.selectCode == '全部' ? '' : selectInfo.selectCode,
      page: state.page,
      pagesize: state.pagesize,
    });
    state.total = data.count;
    data.list.forEach(item => {
      ancestorsRoots.list.push(item);
    });
  }

  // 获取拜祖寻根
  async function getEmperor() {
    const { data } = await sheep.$api.surname.getEmperor();
    data.forEach(item => {
      console.log(item);
      item.type = 'image';
      item.src = item.image_list;
      if (mp_code.value != appVersion.value) {
        item.url = `/pages/chineseSurname/ancestorWorship?id=${item.id}`;
      }
      ancestorsRoots.swiperList.push(item);
    });
  }

  function scrolltolower() {
    if (state.page * state.pagesize < state.total) {
      state.page++;
      getEmperorList();
    }
  }

  function goDetail(item) {
    if (mp_code.value == appVersion.value) {
      return;
    }
    sheep.$router.go('/pages/chineseSurname/ancestorWorship', { id: item.id });
  }
</script>

<template>
  <scroll-view :scroll-y="true" class="wh_750" :style="{
    height: `calc(100vh - ${pageHeight})`
  }" @scrolltolower="scrolltolower" :lower-threshold="150">
    <view class="wh_750 flex flex-column align-center">
      <view class="hW_80"></view>
      <border-chinese :show-header="true" title="三皇五帝">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="wh_662 mt_80 mb_40" style="overflow: hidden;border-radius: 20rpx">
                  <su-swiper :circular="true" :list="ancestorsRoots.swiperList" autoplay></su-swiper>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>

      <view class="hW_40"></view>
      <border-chinese :show-header="true" title="得姓始祖">
        <template #default>
          <view class="ss-m-t-15 ss-m-b-15">
            <border-chinese class-height="wh_700">
              <template #default>
                <view class="worshipAncestorsAndSeekRoots_abbreviationsList wh_662 ss-m-t-100">
                  <view
                    class="worshipAncestorsAndSeekRoots_abbreviationsList_list flex flex-row align-center justify-center"
                    :style="index == zimuList.length - 1 ? 'grid-column-end: span 2;':''" :class="{
                      selectCodeClass:selectInfo.selectCode === item.name
                    }"
                    v-for="(item, index) in zimuList" :key="index" @click="setSelectCode(item.name)">
                    <text class="worshipAncestorsAndSeekRoots_abbreviationsList_list_text">{{ item.name }}</text>
                  </view>
                </view>
                <view class="ss-m-t-80 ss-m-b-25">
                  <view class="mrZhongWu_nameList wh_662">
                    <view class="worshipAncestorsAndSeekRoots_peopleList_all"
                          v-for="(item, index) in ancestorsRoots.list"
                          :key="index"
                          @click.stop="goDetail(item)">
                      <view class="worshipAncestorsAndSeekRoots_peopleList_all_info flex flex-column align-center">
                        <image class="worshipAncestorsAndSeekRoots_peopleList_all_info_img"
                               :src="item.image_input" mode="aspectFill"></image>
                        <view
                          class="worshipAncestorsAndSeekRoots_peopleList_all_info_bottom flex flex-row align-center justify-center">
                          <text class="worshipAncestorsAndSeekRoots_peopleList_all_info_bottom_text">
                            {{ item.ancestors }}
                          </text>
                        </view>
                      </view>
                      <view
                        class="worshipAncestorsAndSeekRoots_peopleList_all_introduced  flex flex-row align-center justify-center">
                        <text class="worshipAncestorsAndSeekRoots_peopleList_all_introduced_text">
                          {{ item.surname }}
                        </text>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </border-chinese>
          </view>
        </template>
      </border-chinese>
      <view class="hW_100"></view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
  .swiperRoots {
    border-radius: 20rpx;
    overflow: hidden;
  }

  .mrZhongWu_nameList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 20rpx;
  }

  .worshipAncestorsAndSeekRoots_abbreviationsList {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-row-gap: 15rpx;
    grid-auto-flow: row dense;

    .worshipAncestorsAndSeekRoots_abbreviationsList_list {
      .worshipAncestorsAndSeekRoots_abbreviationsList_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #292929;
      }
    }
  }

  .worshipAncestorsAndSeekRoots_peopleList_all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .worshipAncestorsAndSeekRoots_peopleList_all_info {
      width: 146rpx;
      background: #B9A475;
      overflow: hidden;
      position: relative;

      .worshipAncestorsAndSeekRoots_peopleList_all_info_img {
        max-width: 146rpx;
        max-height: 175rpx;
        //background: #B9A475;
      }

      .worshipAncestorsAndSeekRoots_peopleList_all_info_bottom {
        width: 146rpx;
        height: 35rpx;
        background: #FAD582;
        border-radius: 0rpx 0rpx 0rpx 0rpx;

        .worshipAncestorsAndSeekRoots_peopleList_all_info_bottom_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #292929;
        }
      }
    }

    .worshipAncestorsAndSeekRoots_peopleList_all_introduced {
      margin-bottom: 25rpx;

      .worshipAncestorsAndSeekRoots_peopleList_all_introduced_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #292929;
      }
    }
  }


  .selectCodeClass {
    background: #FF4206;
    border-radius: 6rpx 6rpx 6rpx 6rpx;


    .worshipAncestorsAndSeekRoots_abbreviationsList_list_text {
      color: #FFFFFF !important;
    }
  }
</style>